<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  import  china from '../../../../../node_modules/echarts/map/js/china.js'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  // import china from './mixins/china'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        var data = [
          {name: '山东', value: 90},
          {name: '湖北', value: 12},
          {name: '陕西', value: 12},
          {name: '江西', value: 12},
          {name: '湖南', value: 14},
          {name: '福建', value: 15},
          {name: '黑龙江', value: 16},
          {name: '四川', value: 18},
        ]
        var geoCoordMap = {
          '山东':[121.15,31.89],
          '湖北':[109.781327,39.608266],
          '陕西':[120.38,37.35],
          '江西':[122.207216,29.985295],
          '湖南':[123.97,47.33],
          '福建':[120.13,33.38],
          '黑龙江':[118.87,42.28],
          '四川':[120.33,36.07],
        }
        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        }

        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption({
          title: {
            text: '监控大图 ',
            textStyle: {
              color: '#fff'
            }
            //left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
           bmap: {
             center: [104.114129, 37.550339],
             zoom: 5,
             roam: true,
/*             mapStyle: {
               styleJson: [{
                 'featureType': 'water',
                 'elementType': 'all',
                 'stylers': {
                   'color': '#d1d1d1'
                 }
               }, {
                 'featureType': 'land',
                 'elementType': 'all',
                 'stylers': {
                   'color': '#f3f3f3'
                 }
               }, {
                 'featureType': 'railway',
                 'elementType': 'all',
                 'stylers': {
                   'visibility': 'off'
                 }
               }, {
                 'featureType': 'highway',
                 'elementType': 'all',
                 'stylers': {
                   'color': '#fdfdfd'
                 }
               }, {
                 'featureType': 'highway',
                 'elementType': 'labels',
                 'stylers': {
                   'visibility': 'off'
                 }
               }, {
                 'featureType': 'arterial',
                 'elementType': 'geometry',
                 'stylers': {
                   'color': '#fefefe'
                 }
               }, {
                 'featureType': 'arterial',
                 'elementType': 'geometry.fill',
                 'stylers': {
                   'color': '#fefefe'
                 }
               }, {
                 'featureType': 'poi',
                 'elementType': 'all',
                 'stylers': {
                   'visibility': 'off'
                 }
               }, {
                 'featureType': 'green',
                 'elementType': 'all',
                 'stylers': {
                   'visibility': 'off'
                 }
               }, {
                 'featureType': 'subway',
                 'elementType': 'all',
                 'stylers': {
                   'visibility': 'off'
                 }
               }, {
                 'featureType': 'manmade',
                 'elementType': 'all',
                 'stylers': {
                   'color': '#d1d1d1'
                 }
               }, {
                 'featureType': 'local',
                 'elementType': 'all',
                 'stylers': {
                   'color': '#d1d1d1'
                 }
              }, {
                 'featureType': 'arterial',
                 'elementType': 'labels',
                'stylers': {
                  'visibility': 'off'
                }
             }, {
              'featureType': 'boundary',
              'elementType': 'all',
                 'stylers': {
                  'color': '#fefefe'
                 }
               }, {
                 'featureType': 'building',
                 'elementType': 'all',
                 'stylers': {
                   'color': '#d1d1d1'
                 }
              }, {
               'featureType': 'label',
               'elementType': 'labels.text.fill',
                 'stylers': {
                   'color': '#999999'
                 }
               }]
            }*/
          },
          series: [
            {
              name: '特种设备',
              type: 'map',
              map: 'china',
              roam: false,
              color: '#66ccff',
              center: [105, 40],
              // coordinateSystem: 'bmap',
              data: convertData(data),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: 'purple'
                }
              }
            },
            {
              name: '焦炭塔',
              type: 'map',
              mapType: 'china',
              coordinateSystem: 'bmap',
              data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
              }).slice(0, 6)),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: 'purple',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              // zlevel: 1
            }
          ]
        })
      }//end initChart
    }
  }
</script>
